<template>
  <n-layout-header bordered class="header">
    <div class="header-content">
      <!-- Logo和网站名称 -->
      <div class="logo-section">
        <n-avatar
          v-if="blogConfig?.blogAvatar"
          :src="blogConfig.blogAvatar"
          :size="40"
          round
        />
        <n-text class="blog-name" strong>
          {{ blogConfig?.blogName || '我的博客' }}
        </n-text>
      </div>

      <!-- 导航菜单和用户区域 -->
      <div class="nav-and-user">
        <!-- 导航菜单 -->
        <n-menu
          :value="activeKey"
          mode="horizontal"
          :options="menuOptions"
          @update:value="handleMenuClick"
          class="nav-menu"
        />

        <!-- 右侧用户区域 -->
        <div class="user-section">
          <template v-if="isLoggedIn">
            <n-dropdown :options="userDropdownOptions" @select="handleUserAction">
              <n-avatar
                :src="userInfo?.avatarUrl"
                :size="32"
                round
              />
            </n-dropdown>
          </template>
          <template v-else>
            <n-space>
              <n-button size="small" @click="goToLogin">
                登录
              </n-button>
              <n-button size="small" type="primary" @click="goToRegister">
                注册
              </n-button>
            </n-space>
          </template>
        </div>
      </div>
    </div>
  </n-layout-header>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, h } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from '@/stores/user'
import type { MenuOption, DropdownOption } from 'naive-ui'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()

// 响应式数据
const activeKey = ref<string>('home')

// 计算属性
const isLoggedIn = computed(() => userStore.isLoggedIn())
const userInfo = computed(() => userStore.userInfo)
const blogConfig = computed(() => userStore.blogConfig)

// 菜单选项
const menuOptions: MenuOption[] = [
  {
    label: '首页',
    key: 'home',
    icon: () => h('i', { class: 'fas fa-home' })
  },
  {
    label: '说说',
    key: 'talk',
    icon: () => h('i', { class: 'fas fa-comments' })
  },
  {
    label: '文章',
    key: 'article',
    icon: () => h('i', { class: 'fas fa-file-alt' })
  },
  {
    label: '相册',
    key: 'album',
    icon: () => h('i', { class: 'fas fa-images' })
  }
]

// 用户下拉菜单选项
const userDropdownOptions: DropdownOption[] = [
  {
    label: '个人中心',
    key: 'profile',
    icon: () => h('i', { class: 'fas fa-user' })
  },
  {
    label: '设置',
    key: 'settings',
    icon: () => h('i', { class: 'fas fa-cog' })
  },
  {
    type: 'divider',
    key: 'divider'
  },
  {
    label: '退出登录',
    key: 'logout',
    icon: () => h('i', { class: 'fas fa-sign-out-alt' })
  }
]

// 方法
const handleMenuClick = (key: string) => {
  switch (key) {
    case 'home':
      router.push('/')
      break
    case 'talk':
      router.push('/talk')
      break
    case 'article':
      router.push('/article')
      break
    case 'album':
      router.push('/album')
      break
  }
}

const handleUserAction = async (key: string) => {
  switch (key) {
    case 'profile':
      router.push('/profile')
      break
    case 'settings':
      router.push('/settings')
      break
    case 'logout':
      await userStore.logout()
      router.push('/')
      break
  }
}

const goToLogin = () => {
  router.push('/login')
}

const goToRegister = () => {
  router.push('/register')
}

// 根据当前路由设置激活菜单
const setActiveMenu = () => {
  const path = route.path
  if (path === '/') {
    activeKey.value = 'home'
  } else if (path.startsWith('/talk')) {
    activeKey.value = 'talk'
  } else if (path.startsWith('/article')) {
    activeKey.value = 'article'
  } else if (path.startsWith('/album')) {
    activeKey.value = 'album'
  }
}

// 生命周期
onMounted(async () => {
  // 获取博客配置
  if (!blogConfig.value) {
    await userStore.fetchBlogConfig()
  }

  // 如果已登录，获取用户信息
  if (isLoggedIn.value && !userInfo.value) {
    await userStore.fetchUserInfo()
  }

  setActiveMenu()
})
</script>

<style scoped>
.header {
  height: 64px;
  padding: 0 24px;
  background: #fff;
}

.header-content {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-and-user {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 1;
  justify-content: space-between;
}

.logo-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.blog-name {
  font-size: 18px;
  color: #333;
}

.user-section {
  display: flex;
  align-items: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header {
    padding: 0 16px;
    height: auto;
    min-height: 64px;
  }

  .header-content {
    flex-direction: column;
    gap: 12px;
    padding: 12px 0;
  }

  .logo-section {
    order: 1;
  }

  /* 导航和用户区域在同一行 */
  .nav-and-user {
    order: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 16px;
  }

  .nav-menu {
    flex: 1;
    overflow-x: auto;
  }

  .user-section {
    flex-shrink: 0;
  }

  .blog-name {
    font-size: 16px;
  }

  /* 移动端菜单样式 */
  :deep(.n-menu) {
    justify-content: center;
    min-width: 200px;
  }

  :deep(.n-menu-item) {
    padding: 8px 12px;
    font-size: 14px;
    white-space: nowrap;
  }

  :deep(.n-menu-item-content) {
    padding: 8px 0px !important;
  }
}

@media (max-width: 480px) {
  .header-content {
    gap: 8px;
    padding: 8px 0;
  }

  .blog-name {
    font-size: 14px;
  }

  :deep(.n-menu-item) {
    padding: 6px 8px;
    font-size: 12px;
  }
}
</style>
